<%@ tag pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="promotion" uri="http://com.primus.promotion/tag/core" %>
<%@ taglib prefix="pbase" tagdir="/WEB-INF/tags/base" %>
<%@ attribute name="promotionId" required="true" type="java.lang.Long" %>
<%@ taglib prefix="primus" tagdir="/WEB-INF/tags" %>
<%@ attribute name="limitType" type="java.lang.String" %>

<pbase:row layout="single">
    <label class="col-sm-2 control-label no-padding-right">规则类型</label>
    <div class="col-sm-10 form-group">
        <div class="col-xs-10 col-sm-5">
            <primus:promotionTargetLimitType fieldName="limitType" fieldId="limitType" selectedField="${limitType}" fmtCls="col-xs-10 col-sm-5"/>
        </div>
    </div>
</pbase:row>

<c:choose>
    <c:when test="${limitType eq 'DISCOUNT_BY_PRODUCT_QUANTITY'}">
        <c:set var="unit" value="件" />
    </c:when>
    <c:otherwise>
        <c:set var="unit" value="元" />
    </c:otherwise>
</c:choose>

<pbase:row layout="single">
    <label class="col-sm-2 control-label no-padding-right">设置折扣率</label>
    <div class="col-sm-10 form-group">
        <div class="col-xs-12">
            <div class="row col-xs-12"><span id="_icon_plus_rate" class="label"><i
                    class="ace-icon glyphicon glyphicon-plus"></i></span></div>
            <div class="row col-xs-12">
                <table id="_rate_table" class="table table-bordered table-hover">
                    <thead>
                    <tr>
                        <th id="condition_title">折扣率条件(${unit})</th>
                        <th>折扣率</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</pbase:row>

<script>
    $(function () {

        $('#limitType').change(function () {
            $('#condition_title').text('DISCOUNT_BY_PRODUCT_AMOUNT' === $(this).val() ? '折扣率条件(元)' : '折扣率条件(件)');
        });

        var $table_body = $('#_rate_table').find('tbody');

        $.ajax({
            cache: true,
            async: false,
            url: 'management/discountPromotion/rates.do?id=${promotionId}',
            type: 'get',
            dataType: 'json'
        }).success(function (data) {
            var append_html = [];
            for (var d in data) {
                append_html.push('<tr>');
                append_html.push('<td class="condition"><input value="' + data[d].rateCondition + '"></td>');
                append_html.push('<td class="discountRate"><input value="' + data[d].discountRate + '"></td>');
                append_html.push('<td><span class="btn btn-xs btn-info rate_remove"><i class="ace-icon glyphicon glyphicon-remove"></i></span></td>')
                append_html.push('</tr>');
            }
            $table_body.append(append_html.join("\n"));
        });

        $('#_icon_plus_rate').click(function () {
            var append_html = [];
            append_html.push('<tr>');
            append_html.push('<td><input type="number" placeholder="条件" /></td>');
            append_html.push('<td><input type="number" class="quantity" placeholder="数量"/></td>');
            append_html.push('<td><span class="btn btn-xs btn-info rate_remove"><i class="ace-icon glyphicon glyphicon-remove"></i></span></td>')
            append_html.push('</tr>');
            $table_body.append(append_html.join("\n"));
        });

        $table_body.on('click', '.rate_remove', function () {
            $(this).parents("tr").remove();
        });
    });
</script>

